<div style="min-height:calc(100vh -  157px)">
  <form nz-form style="background: #fff;padding: 20px;">
    <div nz-row>
      <div nz-col nzSpan="3">
        <nz-input-group style="width: 165px;" [nzSuffix]="suffixIconSearch">
          <input type="text" nz-input placeholder="角色名称" [(ngModel)]="roleName" name="name" (change)="search()" />
        </nz-input-group>
        <ng-template #suffixIconSearch>
          <i nz-icon type="search"></i>
        </ng-template>
      </div>
      <button nz-button nzType="primary" (click)="showModal(null)" style="float: right">新增</button>
    </div>
  </form>

  <!-- 表格列表 -->
  <div style="margin-top:20px;"></div>
  <div
    nz-row
    style="background-color: #fff;margin-top: 20px;padding:20px;"
  >
    <nz-table #basicTable [nzData]="roleInfos" [nzShowPagination]="false">
      <thead>
      <tr>
        <th style="text-align:center">名称</th>
        <th style="text-align:center">排序</th>
        <th style="text-align:center">备注</th>
        <th style="text-align:center">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of basicTable.data;let i = index;">
        <td>{{item.name}}</td>
        <td style="text-align:center">{{item.sort}}</td>
        <td style="text-align:center">{{item.remark}}</td>
        <td style="text-align: center">
          <a (click)="showModal(item.id)">修改&nbsp;&nbsp;</a>
          <a (click)="showModal1(item.id,item.name)">权限&nbsp;&nbsp;</a>
          <a (click)="showDel(item.id)">删除</a>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
  <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="total" [nzPageSizeOptions]="10" (nzPageIndexChange)="loadPage()" [nzShowTotal]="rangeTemplate"></nz-pagination>
  <ng-template #rangeTemplate let-range="range" let-total>
    当前显示 {{range[0]}}-{{range[1]}} 条数据 ，共有 {{total}} 条数据
  </ng-template>

</div>

<!--新增修改模态框-->
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>
    角色信息
  </ng-template>
  <form nz-form [formGroup]="myGroup">
    <nz-form-item>
      <nz-form-label [nzSpan]="5" nzRequired>名称</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <input nz-input formControlName="name" [(ngModel)]="roleDetail.name">
        <nz-form-explain *ngIf="myGroup.get('name').dirty && myGroup.get('name').errors">Should be combination of numbers & alphabets</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="5">排序</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <input type="number" nz-input formControlName="sort" [(ngModel)]="roleDetail.sort">
        <!--<nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="5">备注</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <textarea formControlName="remark" id="" style="width: 300px;height: 160px;" [(ngModel)]="roleDetail.remark"></textarea>
        <!--<nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>
  </form>
  <ng-template #modalFooter>
    <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">保存</button>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
  </ng-template>

</nz-modal>

<!--权限设置模态框-->
<nz-modal [(nzVisible)]="isVisible1" [nzFooter]="modalFooter1" (nzOnCancel)="handleCancel()">
  <nz-tree
    [nzData]="nodes"
    nzCheckable
    nzMultiple
    (nzCheckBoxChange)="nzEvent($event)">
  </nz-tree>
  <ng-template #modalFooter1>
    <button nz-button nzType="primary" (click)="handleOk1()" [nzLoading]="isConfirmLoading">确认</button>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
  </ng-template>
</nz-modal>

